<template>
  <div>
    <basic-container>
      <div class="flex_row" style="align-items: flex-start">
        <el-button size="small" type="success" @click="beforeOpen('add')" v-if="permission.post_add">新增</el-button>
        <el-form :inline="true" class="ml30" size="small" ref="form" :model="query" @keyup.enter.native="refreshChange()">
          <el-form-item label="部门编号:"><el-input placeholder="请输入" v-model="query.deptCode" class="w160"></el-input></el-form-item>
          <el-form-item label="部门名称:"><el-input placeholder="请输入" v-model="query.deptName" class="w160"></el-input></el-form-item>
          <el-form-item label="上级部门:"><el-input placeholder="请输入" v-model="query.parentName" class="w160"></el-input></el-form-item>
          <el-form-item label="岗位名称:"><el-input placeholder="请输入" v-model="query.postName" class="w160"></el-input></el-form-item>
          <el-form-item label="岗位人员:"><el-input placeholder="请输入" v-model="query.name" class="w160"></el-input></el-form-item>
          <el-form-item label="部门层级">
            <el-select placeholder="请选择" class="w160" v-model="query.hierarchy">
              <el-option v-for="item in deptTypeList" :key="item.label" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchChange(query)">查询</el-button>
            <el-button type="default" plain @click="searchReset()">重置</el-button>
            <el-button size="small" type="primary" @click="initData()">组织机构图</el-button>
          </el-form-item>
        </el-form>
      </div>
    </basic-container>
    <basic-container>
      <el-table ref="table" size="small" :data="tableData" :height="$height - 290 + 'px'" v-loading="loading">
        <el-table-column type="expand" width="1">
          <template slot-scope="scope">
            <table style="width: 100%">
              <tr v-for="item in scope.row.postList" :key="item.id">
                <td width="50"></td>
                <td width="200"></td>
                <td width="200"></td>
                <td width="200"></td>
                <td width="200"></td>
                <td class="w160">
                  <div class="cell overell pointer w160">{{ item.postName }}</div>
                </td>
                <td class="flex_item">
                  {{ getRenyuan(item) }}
                </td>
                <td fixed="right" width="200"></td>
              </tr>
            </table>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="deptName" label="部门名称" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="deptCode" label="部门编号" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column label="部门层级" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ formDatahierarchy(scope.row.hierarchy) }}
          </template>
        </el-table-column>
        <el-table-column label="上级部门" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.hierarchy!=1?scope.row.parentName : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="岗位名称" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <span class="pointer main_co" v-if="!scope.row.expansion" @click="toogleExpand(scope.row)">
              展开全部
              <i class="el-icon-arrow-right ml0 main_co"></i>
            </span>
            <span class="pointer main_co" v-else @click="toogleExpand(scope.row)">
              收起全部
              <i class="el-icon-arrow-down ml0 main_co"></i>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="岗位人员" show-overflow-tooltip></el-table-column>
        <el-table-column prop="" label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button type="text" v-if="permission.post_view" @click="beforeOpen('view', scope.row)">查看</el-button>
            <el-button class="ml30 success_f" type="text" v-if="permission.post_edit" @click="beforeOpen('edit', scope.row)">编辑</el-button>
            <el-button class="ml30 red_f" type="text" v-if="permission.post_delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <empty slot="empty"></empty>
      </el-table>
      <el-card class="pub_right">
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page.currentPage" :page-size="page.pageSize" :total="page.total" background layout="total, prev, pager, next, jumper"></el-pagination>
      </el-card>
    </basic-container>
    <el-dialog title="新增" :visible.sync="dialogVisible" width="52%">
      <el-form size="small" mode="form" inline ref="dialogform">
        <el-form-item label="部门名称" required>
          <el-input v-model="form.deptName" class="w160" type="text" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="部门编号" required>
          <el-input class="w140" v-model="form.deptCode" type="text" placeholder="请输入"></el-input>
          <el-popover placement="top-start" title="推荐编码规则：" width="240" trigger="hover">
            <div class="mb10 deepgray_f">一般使用部门]汉语名称首字母组合，位数不限</div>
            <div class="deepgray_f">如:质量部的部门编号是ZLB</div>
            <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
          </el-popover>
        </el-form-item>
        <el-form-item label="部门层级" required>
          <el-select placeholder="请选择" class="w160" deptCode v-model="form.hierarchy" @change="change($event)">
            <el-option v-for="item in deptTypeList" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级部门名称">
          <el-select placeholder="请选择" class="w160" v-model="form.parentId">
            <el-option v-for="item in postDeptList" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <div>
          <table class="owntable tableLayout" style="width: 100%">
            <tr>
              <th width="20%">
                <div class="flex_start">
                  <span class="red_f">*</span>
                  岗位名称
                </div>
              </th>
              <th width="65%">
                <div class="flex_start">
                  <span class="red_f">*</span>
                  岗位人员
                  <span class="warn_f">(输入的每一个岗位人员必须使用回车键确认数据方可有效)</span>
                </div>
              </th>
              <th><span>编辑</span></th>
            </tr>
            <tr v-for="(item, index) in form.postList" :key="index">
              <td class="white_bg">
                <el-input type="text" placeholder="请输入" size="small" v-model="item.postName"></el-input>
              </td>
              <td>
                <div class="hide">
                  <el-select size="small" style="width: 100%" ref="selectIt" popper-class="hideClass" v-model="item.renyuanListId" multiple filterable allow-create default-first-option placeholder="请输入" @remove-tag="tagRemove($event, form, item)">
                    <el-option v-for="v in item.renyuanList" :label="v.name" :value="v.id" :key="v.id"></el-option>
                  </el-select>
                </div>
              </td>
              <td class="white_bg">
                <div class="flex_around">
                  <el-icon class="el-icon-delete f20 pointer" style="color: #e05242" @click.native="delPostItem(form, index, 0)"></el-icon>
                  <!-- <el-icon class="el-icon-error f20 pointer" style="color: #c0c6cc" v-else @click.native="delPostItem(form, index, 1)"></el-icon>
                  <el-icon class="el-icon-edit f20 pointer" style="color: #126bc9" v-if="!item.edit" @click.native="editItem(item)"></el-icon>
                  <el-icon class="el-icon-success f20 pointer" style="color: #126bc9" v-else @click.native="confirmItem(item)"></el-icon> -->
                </div>
              </td>
            </tr>
          </table>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="currentType != 'view'">
        <el-row>
          <el-col :span="12" class="flex_between">
            <el-button type="primary" plain icon="el-icon-circle-plus-outline" size="small" @click="addPostItem(form)">增加岗位及岗位人员</el-button>
            <el-button type="primary" size="small" @click="rowSave">确 定</el-button>
          </el-col>
        </el-row>
      </span>
    </el-dialog>
    <el-dialog title="查看" :visible.sync="dialogVisibleView">
      <el-form inline size="small" ref="dialogform">
        <el-form-item label="部门名称" required><el-input v-model="form.deptName" readonly class="w160" type="text" placeholder="请输入"></el-input></el-form-item>
        <el-form-item label="部门编号" required>
          <el-input class="w160" v-model="form.deptCode" type="text" readonly placeholder="请输入"></el-input>
          <el-popover placement="top-start" title="推荐编号规则：" width="240" trigger="hover">
            <div class="mb10 deepgray_f">一般使用部门]汉语名称首字母组合，位数不限</div>
            <div class="deepgray_f">如:质量部的部门编号是ZLB</div>
            <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
          </el-popover>
        </el-form-item>
        <el-form-item label="部门层级" required>
          <div class="w160 el-input el-input--small el-input__inner" style="height: 32px; line-height: 32px">{{ formDatahierarchy(form.hierarchy) }}</div>
          <!-- <el-input v-model="" readonly class="w160" type="text" placeholder="请输入"></el-input> -->
        </el-form-item>
        <el-form-item label="上级部门名称"><el-input v-model="form.parentName" readonly class="w160" type="text" placeholder="请输入"></el-input></el-form-item>
        <div>
          <table class="owntable tableLayout" style="width: 100%">
            <tr>
              <th width="20%">
                <div class="flex_start">
                  <span class="red_f">*</span>
                  岗位名称
                </div>
              </th>
              <th width="80%">
                <div class="flex_start">
                  <span class="red_f">*</span>
                  岗位人员
                  <!-- <span class="warn_f">单个岗位人员用回车键确认，多个岗位人员用回车键隔开）</span> -->
                </div>
              </th>
            </tr>
            <tr v-for="(item, index) in form.postList" :key="index">
              <td class="white_bg">
                <span class="ml0">{{ item.postName }}</span>
              </td>
              <td>
                <div class="flex_start flex_wrap">
                  <span class="ml10" v-for="(v, k) in item.renyuanList" :key="k">{{ v.name }}</span>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="新增" :visible.sync="dialogVisible" width="52%">
      <el-form size="small" mode="form" inline ref="dialogform">
        <el-form-item label="部门名称" required>
          <el-input v-model="form.deptName" class="w160" type="text" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="部门编号" required>
          <el-input class="w140" v-model="form.deptCode" type="text" placeholder="请输入"></el-input>
          <el-popover placement="top-start" title="推荐编码规则：" width="240" trigger="hover">
            <div class="mb10 deepgray_f">一般使用部门]汉语名称首字母组合，位数不限</div>
            <div class="deepgray_f">如:质量部的部门编号是ZLB</div>
            <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
          </el-popover>
        </el-form-item>
        <el-form-item label="部门层级" required>
          <el-select placeholder="请选择" class="w160" deptCode v-model="form.hierarchy" @change="change($event)">
            <el-option v-for="item in deptTypeList" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级部门名称">
          <el-select placeholder="请选择" class="w160" v-model="form.parentId">
            <el-option v-for="item in postDeptList" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <div>
          <table class="owntable tableLayout" style="width: 100%">
            <tr>
              <th width="20%">
                <div class="flex_start">
                  <span class="red_f">*</span>
                  岗位名称
                </div>
              </th>
              <th width="65%">
                <div class="flex_start">
                  <span class="red_f">*</span>
                  岗位人员
                  <span class="warn_f">(输入的每一个岗位人员必须使用回车键确认数据方可有效)</span>
                </div>
              </th>
              <th><span>编辑</span></th>
            </tr>
            <tr v-for="(item, index) in form.postList" :key="index">
              <td class="white_bg">
                <el-input type="text" placeholder="请输入" size="small" v-model="item.postName"></el-input>
              </td>
              <td>
                <div class="hide">
                  <el-select size="small" style="width: 100%" ref="selectIt" popper-class="hideClass" v-model="item.renyuanListId" multiple filterable allow-create default-first-option placeholder="请输入" @remove-tag="tagRemove($event, form, item)">
                    <el-option v-for="v in item.renyuanList" :label="v.name" :value="v.id" :key="v.id"></el-option>
                  </el-select>
                </div>
              </td>
              <td class="white_bg">
                <div class="flex_around">
                  <el-icon class="el-icon-delete f20 pointer" style="color: #e05242" @click.native="delPostItem(form, index, 0)"></el-icon>
                  <!-- <el-icon class="el-icon-error f20 pointer" style="color: #c0c6cc" v-else @click.native="delPostItem(form, index, 1)"></el-icon>
                  <el-icon class="el-icon-edit f20 pointer" style="color: #126bc9" v-if="!item.edit" @click.native="editItem(item)"></el-icon>
                  <el-icon class="el-icon-success f20 pointer" style="color: #126bc9" v-else @click.native="confirmItem(item)"></el-icon> -->
                </div>
              </td>
            </tr>
          </table>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="currentType != 'view'">
        <el-row>
          <el-col :span="12" class="flex_between">
            <el-button type="primary" plain icon="el-icon-circle-plus-outline" size="small" @click="addPostItem(form)">增加岗位及岗位人员</el-button>
            <el-button type="primary" size="small" @click="rowSave">确 定</el-button>
          </el-col>
        </el-row>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogCanvas" width="660px">
      <div>
        <div class="flex_end">
          <el-button class="push_right" type="primary" size="small" @click="handlePrint">打印组织机构图</el-button>
        </div>
        <div id="main" ref="print"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, remove, update, add, getDept, getDeptTree } from '@/api/system/dept'
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      currentType: '',
      dataSrc: '',
      postDeptList: [],
      form: {
        parentId: '',
        hierarchy: '',
        deptName: '',
        deptCode: '',
        postList: [{ postName: '', renyuanList: [] }],
        delpostList: [],
        delRenyuanList: [],
      },
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      dialogVisible: false,
      dialogVisibleView: false,
      dialogCanvas: false,
      showPrint:false,
      deptTypeList: [],
      tableData: [],
    }
  },
  computed: {
    ...mapGetters(['permission']),
    ids() {
      let ids = []
      this.selectionList.forEach((ele) => {
        ids.push(ele.id)
      })
      return ids.join(',')
    },
  },
  created() {
    this.onLoad(this.page)
    this.getdeptTypeListData()
  },
  methods: {
    handlePrint() {
      this.$MyPrint(document.querySelector('#main'))
    },
    editItem(item) {
      this.$set(item, 'edit', true)
    },
    confirmItem(item) {
      if (item.postName == '') {
        this.$message.error('请输入岗位名称')
        return
      }
      if (item.renyuanListId.length == 0) {
        this.$message.error('请输入人员名称')
        return
      }
      for (let i = 0; i < item.renyuanListId.length; i++) {
        let findIndex = item.renyuanList.findIndex((el) => el.id == item.renyuanListId[i])
        console.log(findIndex)
        if (findIndex < 0) {
          item.renyuanList.push({
            name: item.renyuanListId[i],
          })
        }
      }
      this.$set(item, 'edit', false)
    },
    change(hierarchy) {
      if (hierarchy == 1) return
      let parmas = {
        hierarchy: hierarchy - 1,
      }
      getList(1, 10000, parmas).then(({ data }) => {
        this.postDeptList = data.data.records
      })
    },
    getRenyuan(item) {
      let text = '-'
      if (item.renyuanList.length != 0) {
        text = item.renyuanList.map((item) => item.name).join(';')
      }
      return text
    },
    getdeptTypeListData() {
      this.deptTypeList = []
      for (let i = 0; i < 10; i++) {
        let obj = {
          label: this.formDataGroup(i),
          value: i + 1 + '',
        }
        this.deptTypeList.push(obj)
      }
    },
    formDatahierarchy(hierarchy) {
      if (hierarchy) {
        let index = hierarchy - 1
        let groupList = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
        return `${groupList[index]}级部门`
      } else {
        return '-'
      }
    },
    formDataGroup(i) {
      let groupList = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
      return `${groupList[i]}级部门`
    },
    addPostItem(form) {
      form.postList.push({
        edit: true,
        renyuanList: [],
      })
    },
    tagRemove(id, form, item) {
      let currentItem = item.renyuanList.find((el) => el.id == id)
      if (currentItem) {
        this.form.delRenyuanList.push(currentItem)
      }
    },
    delPostItem(form, i, type) {
      console.log(i)
      if (type == 0) {
        this.form.delpostList.push(form.postList[i])
      }
      form.postList.splice(i, 1)
    },
    initData() {
      getDeptTree().then((res) => {
        if (res.data.data) {
          this.dialogCanvas = true
          this.$nextTick(() => {
            let str = JSON.stringify(res.data.data).replace(/title/g, 'name')
            let data = JSON.parse(str)
            var myChart = echarts.init(document.getElementById('main'))
            myChart.setOption({
              tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove',
                valueFormatter: () => '',
              },
              // toolbox: {
              //   feature: {
              //     saveAsImage: {},
              //   },
              // },
              title: {
                text: '组织机构图',
              },
              series: [
                {
                  type: 'tree',
                  data: data,
                  left: '0',
                  right: '0',
                  top: '8%',
                  bottom: '20%',
                  symbol: 'none',
                  orient: 'TB',
                  edgeShape: 'polyline',
                  expandAndCollapse: true,
                  avoidLabelOverlap: true,
                  roam: true, //移动+缩放
                  scaleLimit: {
                    min: 0.8, //最小的缩放值
                    max: 4, //最大的缩放值
                  },
                  label: {
                    backgroundColor: '#126BC9',
                    padding: [6, 10],
                    borderRadius: 2,
                    position: 'bottom',
                    verticalAlign: 'middle',
                    align: 'center',
                    fontSize: 12,
                    borderColor: '#1E9FFF',
                    color: '#fff',
                    borderWidth: 1,
                    borderRadius: 5,
                  },
                  lineStyle: {
                    color: '#126BC9',
                    width: 1,
                    curveness: 1,
                    type: 'broken',
                  },
                  leaves: {
                    label: {
                      position: 'bottom',
                      verticalAlign: 'middle',
                      align: 'center',
                    },
                  },
                  animation: false
                },
              ],
            })
          })
        }
      })
    },
    rowSave() {
      if (this.form.deptName == '') {
        this.$message.error('请输入部门名称')
        return
      }
      if (this.form.deptCode == '') {
        this.$message.error('请输入部门编号')
        return
      }
      if (this.form.hierarchy == '') {
        this.$message.error('请选择部门层级')
        return
      }
      if (this.form.hierarchy > 1 && this.form.parentId == '') {
        this.$message.error('请选择上级部门')
        return
      }
      for (let i = 0; i < this.form.postList.length; i++) {
        let item = this.form.postList[i]
        let renyuanListLen = item.renyuanList.length
        if (item.postName == '') {
          this.$message.error('请输入岗位名称')
          return
        }
        if (!item.renyuanListId || item.renyuanListId.length == 0) {
          this.$message.error('请输入岗位人员')
          return
        }
        for (let j = 0; j < item.renyuanListId.length; j++) {
          if (j >= renyuanListLen) {
            item.renyuanList.push({
              name: item.renyuanListId[j],
            })
          }
        }
      }
      add(this.form).then(
        () => {
          this.dialogVisible = false
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        },
        (error) => {
          window.console.log(error)
        }
      )
    },
    rowUpdate() {
      if (this.form.deptName == '') {
        this.$message.error('请输入部门名称')
        return
      }
      if (this.form.deptCode == '') {
        this.$message.error('请输入部门编号')
        return
      }
      if (this.form.hierarchy == '') {
        this.$message.error('请选择部门层级')
        return
      }
      if (this.form.hierarchy > 1 && this.form.parentId == '') {
        this.$message.error('请选择上级部门')
        return
      }
      for (let i = 0; i < this.form.postList.length; i++) {
        let item = this.form.postList[i]
        let renyuanListLen = item.renyuanList.length
        if (item.postName == '') {
          this.$message.error('请输入岗位名称')
          return
        }
        if (!item.renyuanListId || item.renyuanListId.length == 0) {
          this.$message.error('请输入岗位人员')
          return
        }
        for (let j = 0; j < item.renyuanListId.length; j++) {
          if (j >= renyuanListLen) {
            item.renyuanList.push({
              name: item.renyuanListId[j],
            })
          }
        }
      }
      update(this.form).then(
        () => {
          this.dialogVisible = false
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        },
        (error) => {
          window.console.log(error)
        }
      )
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id)
        })
        .then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
    },
    handleDelete(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id)
        })
        .then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          // this.$refs.crud.toggleSelection();
        })
    },
    initFrom() {
      this.form = {
        hierarchy: '',
        deptName: '',
        deptCode: '',
        postList: [{ postName: '', renyuanList: [] }],
        delpostList: [],
      }
    },
    beforeOpen(type, row) {
      this.currentType = type
      if (['add'].includes(type)) {
        this.initFrom()
        this.dialogVisible = true
      }
      if (['edit', 'view'].includes(type)) {
        getDept(row.id).then(({ data }) => {
          console.log(data)
          data.data.postList.forEach((item) => {
            item.edit = false
            item.renyuanListId = item.renyuanList.map((el) => el.id)
          })
          this.form = data.data
          if (data.data.hierarchy) this.change(data.data.hierarchy)
          if (['edit'].includes(type)) this.dialogVisible = true
          if (['view'].includes(type)) this.dialogVisibleView = true
        })
      }
    },
    searchReset() {
      this.query = {}
      this.onLoad(this.page)
    },
    searchChange(params) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      // done();
    },
    selectionChange(list) {
      this.selectionList = list
    },
    selectionClear() {
      this.selectionList = []
      // this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage
      this.refreshChange()
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.refreshChange()
    },
    refreshChange() {
      this.onLoad(this.page, this.query)
    },
    onLoad(page, params = {}) {
      this.loading = true
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
        const data = res.data.data
        this.page.total = data.total
        this.tableData = data.records
        this.loading = false
        this.selectionClear()
      })
    },
  },
}
</script>

<style scoped>
#main {
  width: 560px;
  height: 800px;
  margin: 0 auto;
}
::v-deep .el-table__expand-icon {
  font-size: 0;
}
.reviewTitle {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 0px;
  color: #606366;
  opacity: 1;
  margin-top: 20px;
}
.reviewText {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 18px;
  color: #909499;
  opacity: 1;
}

.reviewList {
  background: #ffffff;
  border: 1px dashed #e4e8ed;
  padding: 15px 15px 0 15px;
  position: relative;
}
.delete {
  position: absolute;
  top: 5px;
  right: 5px;
}
</style>
